<template>
	<view class="content">
		<view class="order-state">
			<view>{{data.status | status}}</view>
			<span>{{data.feedback_context}}</span>
		</view>
		<!-- <view class="order-state">
			受理中
		</view> -->
		<!-- <view class="order-state">
			已完成
		</view> -->
		<view class="goods dl">
			<dt><image :src="data.p_img_small"></image></dt>
			<dd>
				<h2>{{data.p_name}}</h2>
				<!-- <span>适用型号：9F-1A</span> -->
			</dd>
		</view>
		<view class="repair">
			<h2>联系方式</h2>
			<li><span>姓名</span><em>{{data.user_name}}</em></li>
			<li><span>手机号</span><em>{{data.user_mobile}}</em></li>
			<li><span>地址</span><em>{{data.user_address}}</em></li>
			<li><span>归属医院</span><em>{{data.belong_hospital}}</em></li>
		</view>
		<view class="cause">
			<li><span>故障原因</span><em>{{data.aas_context}}</em></li>
		</view>
		<view class="cause">
			<li>
				<span>故障图片</span>
				<view class="upload">
					<view class="img" v-for="(url,index) in data.aas_imgs" :key="index">
						<image :src="data.aas_imgs_prefix+url"></image>
					</view>
				</view>
			</li>
		</view>
		
		<!--*****受理中显示******-->
		<!-- <view class="repair">
			<h2>受理信息</h2>
			<li><span>受理人</span><em>陈晨</em></li>
			<li><span>受理时间</span><em>2022-09-09</em></li>
		</view> -->
		
		
		<!-- <view class="fixed"> -->
			<!-- <span @click="showModal">取消申请</span>  <!--待处理显示取消申请--> -->
			<!-- <span @click='backFn'>返回</span> -->
		<!-- </view> -->
	</view>
</template>

<script>
	export default {
		filters:{
			status(val) {
				let text = ''
				switch (val) {
					case 0:
				  text = '审核中'
				  break
					case 1:
						text = '已受理'
						break
					case 2:
						text = '已完成'
						break
					case 3:
						text = '已拒绝'
						break
				}
				return text
			}
		},
		data() {
			return {
				data:{}
			}
		},
		onLoad(e) {
			this.query(e.id)
		},
		methods: {
			query(id) {
				this.$api({
					url: `/after/detail/${id}`,
					method: "GET",
				}).then(res => {
					this.data = res.data
					this.data.aas_imgs = res.data.aas_imgs.split(',').filter(item=>item)
					console.log(this.data.aas_imgs)
				})
			},
			navigateto(url) {
				wx.navigateTo({
					url: url
				})
			},
			showModal() {
				wx.showModal({
				  title: '提示',
				  content: '您确认要取消申请吗？',
				  cancelColor: '#999',
				  confirmColor: '#333',
				  success (res) {
				    if (res.confirm) {
				      console.log('用户点击确定')
				    } else if (res.cancel) {
				      console.log('用户点击取消')
				    }
				  }
				})
			},
			backFn(){
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	
	.content {
		padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
	}
	
	.goods {
		display: flex;
		align-items: center;
		background: #fff;
		padding: 30rpx;
		margin: 20rpx;
		border-radius: 16rpx;
		dt {
			width: 152rpx;
			image {
				width: 152rpx;
				height: 152rpx;
			}
		}
		dd {
			flex: 1;
			position: relative;
			padding-left: 24rpx;
			h2 {
				height: 80rpx;
				font-size: 28rpx;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			span, em {
				display: block;
				font-size: 24rpx;
				margin: 10rpx 0 0;
				color: #999;
			}
			em {
				position: absolute;
				bottom: 0;
				right: 0;
			}
		}
	}
	
	.order-state {
		padding: 30rpx;
		font-size: 32rpx;
		background: #dc261b;
		font-weight: bold;
		color: #fff;
		span {
			display: block;
			font-size: 28rpx;
			font-weight: normal;
			margin: 10rpx 0 0;
		}
	}
	.repair {
		margin: 20rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		h2 {
			font-size: 28rpx;
			margin-bottom: 30rpx;
		}
		li {
			display: flex;
			margin-top: 12rpx;
			span {
				width: 160rpx;
				font-size: 28rpx;
			}
			em {
				flex: 1;
				text-align: right;
				color: #999;
			}
			
		}
	}
	
	.cause {
		margin: 20rpx;
		padding: 30rpx;
		background: #fff;
		border-radius: 16rpx;
		li {
			display: flex;
			flex-direction: column;
			span {
				font-size: 28rpx;
			}
			em {
				font-size: 28rpx;
				margin-top: 30rpx;
				color: #999;
			}			
			.upload {
				display: flex;
				margin: 30rpx 0 0;
				.img {
					width: 152rpx;
					height: 152rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					position: relative;
					margin-right: 50rpx;
					image {
						width: 152rpx;
						height: 152rpx;
					}
				}
			}
		}
	}
	
	.fixed {
		width: 750rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		box-sizing: initial;
		padding-bottom: calc(env(safe-area-inset-bottom));
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		span {
			width: 168rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			color: #999;
			border: 2rpx solid #d8d8d8;
			border-radius: 50rpx;
			font-size: 28rpx;
			margin-right: 30rpx;
		}
	}
	
</style>
